import React, { Component } from 'react';
import {
    Flex,
    Icon,
    Badge
} from 'antd-mobile';
import { connect } from 'dva';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import { goods_title } from "./GoodsTitle.less";
import { routerRedux } from 'dva/router';

import fenxiang from '../../assets/svg/fenxiang.svg';


class GoodsTitle extends Component {
    constructor(props){
        super(props);
        this.state={
            didMount:false,
            wrapoffsetHeight:0,
        };
        this.fatherNode=null;
        this.detailNode=null;
        this.wrapNode=null;
    }

    componentDidMount(){
        // const wrap=document.getElementById('wrapperScrollUseMy');
        // this.setState({
        //     didMount:true,
        //     wrapoffsetHeight:wrap.offsetHeight,
        // });
        // this.fatherNode=document.getElementById('ScrollUseMy');
        // this.detailNode=document.getElementById('goodsDetailInfoId');
        //this.props.alloyTouch.to(-this.getDetailScrollTop());
    }

    getPos = (ele,fathers) => {
        let top=ele.offsetTop;
        //let left=ele.offsetLeft;
        let offsetEle=ele.offsetParent;
        while(offsetEle&&offsetEle!=fathers){
            top+=offsetEle.offsetTop;
            let bTOPWidth=0;
            if( bTOPWidth=parseInt(this.getStyle(offsetEle,'borderTopWidth'))){
                top+=bTOPWidth;
            }

            // left+=offsetEle.offsetLeft;
            // let bLeftWidth=0;
            // if( bLeftWidth=parseInt(getStyle(offsetEle,'borderLeftWidth'))){
            //     left+=bLeftWidth;
            // }
            offsetEle=offsetEle.offsetParent;
        }
        // let o={};
        // o.x=left;
        // o.y=top;
        return top;
    }

    getDetailScrollTop = () => {
        if(this.state.didMount){


            const detailScrollTop = this.getPos(this.detailNode, this.fatherNode);
            return detailScrollTop
        }else {
            return 0
        }

    }

    render () {
        const { location={}, specId="", id="", app, alloyTouch, dispatch } = this.props;
        const { pathname='' } = location;
        // let detailScrollTop = this.getDetailScrollTop();
        // console.log(Math.abs(app.targetScrollHeight));
        // console.log(Math.abs(app.targetScrollHeight)>detailScrollTop);
        let selectSty = { color:"#ff0036",borderBottom:"0.01rem solid #ff0036" };

        return (
            <div className={goods_title}>
                <NavTopBar
                    dispatch={dispatch}
                    // rightContent={
                    //     [
                    //         <Badge text={22}  key="1"  >
                    //             <Icon type={ goodsCart.id } />
                    //         </Badge>,
                    //         <Icon key="2" type={ fenxiang.id } />
                    //     ]
                    // }
                    title={
                        <Flex className="title_name">
                            <div
                                onClick={()=>{
                                    dispatch(routerRedux.replace(`/goodsDetail/${specId}`))
                                }}
                                style={ pathname.includes("/goodsDetail/")==true ? selectSty : {} }
                            >
                                商品
                            </div>


                            <div onClick={()=>{

                                dispatch(routerRedux.replace(`/detail/${specId}`))

                            }}
                                 style={ pathname.includes("/detail/")==true ? selectSty : {} }
                            >
                                详情
                            </div>

                            <div
                                onClick={()=>{
                                    dispatch(routerRedux.replace(`/evaluateList/${id}/${specId}`))
                                }}
                                style={ pathname.includes("/evaluateList/")==true ? selectSty : {} }
                            >
                                评论
                            </div>
                        </Flex>
                    }
                >
                </NavTopBar>
            </div>
        );
    }
}

export default connect(({app})=>({app}))(GoodsTitle);